<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>编辑微信模板消息</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <style>
        .mainBox {
            padding: 15px;
        }

        .main-container {
            max-width: 850px;
            margin: 0 auto;
        }

        .layui-form-item {
            margin-bottom: 22px;
        }

        .form-tip {
            display: block;
            margin-top: 8px;
            color: #666;
            font-size: 12px;
            line-height: 1.5;
        }

        .form-tip i {
            color: #1E9FFF;
            margin-right: 4px;
        }

        .json-example {
            margin-top: 8px;
            padding: 10px;
            background: #f8f8f8;
            border-radius: 4px;
            border: 1px solid #eee;
            font-family: monospace;
            font-size: 12px;
            color: #333;
            white-space: pre-wrap;
            word-break: break-all;
        }

        .bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px;
            background: #fff;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 99;
        }

        .button-container {
            text-align: center;
        }

        .button-container button {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <form class="layui-form" action="" lay-filter="wechat-template-edit">
        <div class="mainBox">
            <div class="main-container">
                <!-- 模板标题（唯一，必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板标题 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" lay-verify="required|verifyName" autocomplete="off"
                            placeholder="请输入模板标题（如：订单支付成功通知）" class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            标题为唯一标识，不可重复；建议清晰描述用途，便于管理
                        </span>
                    </div>
                </div>

                <!-- WXAPPID（必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">开发者ID<span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="wx_app_id" id="wx_app_id" lay-verify="required|verifyAppIdLength"
                            autocomplete="off" placeholder="输入微信公众号/小程序APPID" class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            从微信公众平台「开发-基本配置」获取，长度18-32位
                        </span>
                    </div>
                </div>

                <!-- WXAPPSECRET（必填，默认不回显） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">开发者密码&nbsp;<span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="wx_app_secret" id="wx_app_secret" lay-verify="verifyAppSecretLength"
                            autocomplete="off" placeholder="不修改请留空，修改请输入新密码" class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-warning"></i>
                            注意保密！泄露可能导致账号安全风险；不修改无需填写
                        </span>
                    </div>
                </div>

                <!-- 微信模板ID（必填，正则验证） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">微信模板ID <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="template_id" id="template_id" lay-verify="required|verifyTemplateId"
                            autocomplete="off" placeholder="如：HzvBOeBKgqSDi_jfvyFt_O5SyP7Sv3_whbAlR7qukX0"
                            class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            从微信公众平台「模板消息-我的模板」获取，支持10-64位字母/数字/_/-
                        </span>
                    </div>
                </div>

                <!-- 模板变量（JSON格式，非必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板变量</label>
                    <div class="layui-input-block">
                        <textarea name="template_data" id="template_data" lay-verify="verifyJson" autocomplete="off"
                            placeholder="不修改请留空，修改请输入标准JSON格式" class="layui-textarea" rows="6"></textarea>
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            变量需与微信模板占位符对应（如{{first.DATA}}对应"first"）；不修改无需填写
                        </span>
<div class="json-example">
示例：
{
    "phone_number3": {"value": "18888888888"},
    "time8": {"value": "2025年10月27日 23:47:19"},
    "thing11": {"value": "绑定成功"},
    "remark": {"value": "remark"}
}
</div>
                    </div>
                </div>

                <!-- 描述说明（非必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">描述说明</label>
                    <div class="layui-input-block">
                        <textarea name="description" id="description" autocomplete="off" placeholder="不修改请留空，修改请输入用途说明"
                            class="layui-textarea" rows="3"></textarea>
                    </div>
                </div>

                <!-- 模板状态（必填，默认开启） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板状态 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_active" value="1" title="开启" lay-skin="tag">
                        <input type="radio" name="is_active" value="0" title="关闭" lay-skin="tag">
                    </div>
                </div>

                <!-- 排序号（非必填，默认0） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">排序号</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort_num" id="sort_num" lay-verify="verifySort" autocomplete="off"
                            placeholder="不修改请留空，修改请输入0-9999的非负整数" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit
                    lay-filter="wechat-template-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交保存
                </button>
                <button type="button" class="pear-btn pear-btn-danger pear-btn-sm" id="close-btn">
                    <i class="layui-icon layui-icon-close"></i>
                    取消关闭
                </button>
            </div>
        </div>
    </form>

    <!-- 依赖JS -->
    <script src="../../../component/com/api.js"></script>
    <script src="../../../component/com/auth.js"></script>
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>
    <script>
        layui.use(['form', 'jquery', 'layer'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;

            // 1. 全局配置
            const API_BASE_URL = apiConfig.baseUrl;
            const AUTH_TOKEN = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");
            const urlParams = new URLSearchParams(window.location.search);
            const TEMPLATE_ID = urlParams.get('id'); // 编辑的模板ID
            const EDIT_API_URL = `${API_BASE_URL}/wechat/template/${TEMPLATE_ID}/`; // 编辑接口
            let initialData = {}; // 存储初始数据（用于对比变更）

            // 2. 页面初始化：加载模板详情
            if (TEMPLATE_ID) {
                loadTemplateDetail();
            } else {
                layer.msg('模板ID不存在，无法编辑', { icon: 2, time: 2000 });
                setTimeout(() => parent.layer.close(parent.layer.getFrameIndex(window.name)), 2000);
            }
            // 新增：JSON格式化函数（核心！给JSON加换行缩进）
            function formatJsonStr(jsonStr) {
                try {
                    // 空字符串直接返回
                    if (!jsonStr.trim()) return '';
                    // 解析为JSON对象，再转成带2空格缩进的字符串（自动加换行）
                    const jsonObj = JSON.parse(jsonStr);
                    return JSON.stringify(jsonObj, null, 2);
                } catch (e) {
                    // 若JSON格式错，返回原始字符串（避免回显乱码）
                    return jsonStr;
                }
            }

            // 加载模板详情并回显表单
            function loadTemplateDetail() {
                const loading = layer.load(2, { shade: 0.3 });
                $.ajax({
                    url: EDIT_API_URL,
                    type: 'GET',
                    headers: { "Authorization": AUTH_TOKEN },
                    dataType: 'json',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success && result.data) {
                            const data = result.data;
                            // 保存初始数据（统一转为字符串，便于后续对比）
                            initialData = {
                                name: data.name || '',
                                wx_app_id: data.wx_app_id || '',
                                wx_app_secret: data.wx_app_secret || '', // 仅用于对比，不回显
                                template_id: data.template_id || '',
                                template_data: data.template_data || '',
                                description: data.description || '',
                                is_active: data.is_active?.toString() || '1',
                                sort_num: data.sort_num?.toString() || '0'
                            };

                            // 表单回显
                            form.val("wechat-template-edit", initialData);
                            form.render(); // 重新渲染单选框、下拉框
                        } else {
                            const errorMsg = result.message || '加载模板详情失败';
                            layer.msg(errorMsg, { icon: 2, time: 2000 });
                        }
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        const errorMsg = xhr.status === 401 ? '登录已过期，请重新登录' : '网络异常，加载失败';
                        layer.msg(errorMsg, { icon: 2, time: 2000 });
                        if (xhr.status === 401) parent.window.location.href = '../../../login.html';
                    }
                });
            }

            // 3. 表单验证规则（与新增页一致，新增标题唯一性校验）
            form.verify({
                // 模板标题：非空
                verifyName: function (value) {
                    const trimVal = value.trim();
                    if (!trimVal) return "模板标题不能为空";
                },
                // WXAPPID长度验证
                verifyAppIdLength: function (value) {
                    const trimVal = value.trim();
                    if (trimVal.length < 18 || trimVal.length > 32) {
                        return "APPID长度应为18-32位";
                    }
                },
                // WXAPPSECRET长度验证（仅修改时校验）
                verifyAppSecretLength: function (value) {
                    const trimVal = value.trim();
                    if (!trimVal) return; // 不修改则不校验
                    if (trimVal.length < 32 || trimVal.length > 64) {
                        return "APPSECRET长度应为32-64位";
                    }
                },
                // 模板ID正则验证
                verifyTemplateId: function (value) {
                    const trimVal = value.trim();
                    const reg = /^[a-zA-Z0-9_\-]{10,64}$/;
                    if (!reg.test(trimVal)) {
                        return "模板ID需为10-64位字母/数字/_/-";
                    }
                },
                // JSON格式验证（仅修改时校验）
                verifyJson: function (value) {
                    const trimVal = value.trim();
                    if (!trimVal) return; // 不修改则不校验
                    try {
                        const jsonData = JSON.parse(trimVal);
                        if (typeof jsonData !== 'object' || jsonData === null || Object.keys(jsonData).length === 0) {
                            return "模板变量需为非空JSON对象,JSON格式错误，请参考示例调整";
                        }
                    } catch (e) {
                        return "模板变量格式错误，请输入标准JSON（参考示例）";
                    }
                },
                // 排序号：0-9999非负整数（仅修改时校验）
                verifySort: function (value) {
                    const trimVal = value.trim();
                    if (!trimVal) return; // 不修改则不校验
                    const num = parseInt(value);
                    if (isNaN(num) || num < 0 || num > 9999) {
                        return "排序号需为0-9999的非负整数";
                    }
                }
            });

            // 4. 检查数据是否变更（对比初始数据与当前输入）
            function isDataChanged(currentData) {
                // 辅助函数：处理空值统一对比（将null/undefined转为空字符串）
                const getCompareValue = (val) => {
                    if (val === null || val === undefined) return '';
                    // 对字符串去空格，其他类型直接转字符串
                    return typeof val === 'string' ? val.trim() : String(val);
                };

                // 1. 对比必填字段（标题、APPID、模板ID、状态）
                // 这些字段即使为空字符串也需对比（因前端验证已确保非空）
                const requiredFields = [
                    { key: 'name', label: '模板标题' },
                    { key: 'wx_app_id', label: '开发者ID' },
                    { key: 'template_id', label: '微信模板ID' },
                    { key: 'is_active', label: '模板状态' }
                ];
                for (const { key } of requiredFields) {
                    const currentVal = getCompareValue(currentData[key]);
                    const initialVal = getCompareValue(initialData[key]);
                    if (currentVal !== initialVal) {
                        // 调试用：console.log(`变更字段：${label}，旧值：${initialVal}，新值：${currentVal}`);
                        return true;
                    }
                }

                // 2. 对比敏感字段：开发者密码（wx_app_secret）
                // 只要用户输入了新值（非空），无论初始值如何都视为变更
                const currentSecret = getCompareValue(currentData.wx_app_secret);
                if (currentSecret) {
                    // 调试用：console.log(`变更字段：开发者密码，已输入新值`);
                    return true;
                }

                // 3. 对比模板变量（template_data）
                // 仅当当前值非空且与初始值（格式化后）不同时视为变更
                const currentTemplateData = getCompareValue(currentData.template_data);
                const initialTemplateData = getCompareValue(initialData.template_data);
                if (currentTemplateData && currentTemplateData !== initialTemplateData) {
                    // 调试用：console.log(`变更字段：模板变量，旧值：${initialTemplateData}，新值：${currentTemplateData}`);
                    return true;
                }

                // 4. 对比描述说明（description）
                // 仅当当前值非空且与初始值不同时视为变更
                const currentDesc = getCompareValue(currentData.description);
                const initialDesc = getCompareValue(initialData.description);
                if (currentDesc && currentDesc !== initialDesc) {
                    // 调试用：console.log(`变更字段：描述说明，旧值：${initialDesc}，新值：${currentDesc}`);
                    return true;
                }

                // 5. 对比排序号（sort_num）
                // 仅当当前值非空且与初始值（数字转字符串）不同时视为变更
                const currentSort = getCompareValue(currentData.sort_num);
                const initialSort = getCompareValue(initialData.sort_num);
                if (currentSort && currentSort !== initialSort) {
                    // 调试用：console.log(`变更字段：排序号，旧值：${initialSort}，新值：${currentSort}`);
                    return true;
                }

                // 所有字段均无变更
                return false;
            }

            // 5. 表单提交事件
            form.on('submit(wechat-template-save)', function (data) {
                const currentData = data.field;

                // 检查是否有实际变更
                if (!isDataChanged(currentData)) {
                    layer.msg("未修改任何数据，无需提交", { icon: 3, time: 1500 });
                    return false;
                }

                // 处理提交数据
                const submitData = {
                    name: currentData.name.trim(),
                    wx_app_id: currentData.wx_app_id.trim(),
                    template_id: currentData.template_id.trim(),
                    is_active: parseInt(currentData.is_active),
                    sort_num: parseInt(data.field.sort_num),
                    template_data: data.field.template_data.trim(),
                    wx_app_secret: data.field.wx_app_secret.trim(),
                    description: data.field.description.trim(),
                };

                // 可选字段：非空才添加（避免覆盖原有值）
                // 开发者密码：仅修改时提交
                // if (currentData.wx_app_secret?.trim()) {
                //     submitData.wx_app_secret = currentData.wx_app_secret.trim();
                // }
                // // 模板变量：非空则解析为JSON对象
                // const templateData = currentData.template_data?.trim();
                // if (templateData) {
                //     try {
                //         submitData.template_data = JSON.parse(templateData);
                //     } catch (e) {
                //         layer.msg("模板变量格式错误，请重新输入", { icon: 2, time: 2000 });
                //         return false;
                //     }
                // }
                // 描述说明：非空才提交
                // if (currentData.description?.trim()) {
                //     submitData.description = currentData.description.trim();
                // }
                // 排序号：非空则转为整数
                // if (currentData.sort_num?.trim()) {
                //     submitData.sort_num = parseInt(currentData.sort_num.trim());
                // }

                // 发送更新请求
                const loading = layer.load(2, { shade: 0.3, shadeClose: false });
                $.ajax({
                    url: EDIT_API_URL,
                    type: 'PATCH',
                    headers: {
                        "Authorization": AUTH_TOKEN,
                        "Content-Type": "application/json"
                    },
                    data: JSON.stringify(submitData),
                    dataType: 'json',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success || result.code === 200) {
                            layer.msg(result.message || "模板更新成功", {
                                icon: 1,
                                time: 1500
                            }, function () {
                                // 关闭弹窗并刷新父页面表格
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.layui.table.reload("base-table");
                            });
                        } else {
                            // 提取后端错误信息
                            let errMsg = result.message || "更新失败，请重试";
                            if (result.data && typeof result.data === 'object') {
                                const firstErrKey = Object.keys(result.data)[0];
                                if (firstErrKey) {
                                    errMsg = result.data[firstErrKey][0];
                                }
                            }
                            layer.msg(errMsg, { icon: 2, time: 2000 });
                        }
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        const errMsg = xhr.status === 401
                            ? "登录已过期，请重新登录"
                            : `网络异常（${xhr.status}），更新失败`;
                        layer.msg(errMsg, { icon: 2, time: 2000 });
                        if (xhr.status === 401) {
                            setTimeout(() => {
                                parent.window.location.href = '../../../login.html';
                            }, 2000);
                        }
                    }
                });

                return false; // 阻止默认提交
            });

            // 6. 关闭按钮事件
            $('#close-btn').on('click', function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });

            // 7. 页面关闭前提示未提交的修改
            window.onbeforeunload = function (e) {
                const currentData = form.val("wechat-template-edit");
                if (isDataChanged(currentData)) {
                    const message = "当前页面有未提交的修改，关闭后将丢失，是否确认？";
                    e.returnValue = message;
                    return message;
                }
            };

            // 8. 页面加载完成后初始化表单渲染
            $(function () {
                form.render();
            });
        });
    </script>
</body>

</html>